<template>
    <div id="chartBar"></div>
</template>

<script setup>
import { ref, onMounted, markRaw } from "vue"
import * as echarts from 'echarts'

// 接受父组件的数据
const props = defineProps({
    legend: {
        type: Array,
        default: []
    },
    xAxisData: {
        type: Array,
        default: []
    },
    seriesData1: {
        type: Array,
        default: []
    },
    seriesData2: {
        type: Array,
        default: []
    },
})

// 图表对象
const chartBar = ref(null)


const createBarChart = (chart) => {
    const colorArr2 = ["rgba(11, 83, 128)", "rgba(2, 143, 224)", "rgba(11, 83, 128)"];
    const colorArr = ["rgb(12, 109, 122)", "rgba(1, 241, 228)", "rgb(12, 109, 122)"];
    var color = {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: colorArr[0],
            },
            {
                offset: 0.5,
                color: colorArr[0],
            },
            {
                offset: 0.5,
                color: colorArr[1],
            },
            {
                offset: 1,
                color: colorArr[1],
            },
        ],
    };
    var color2 = {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: colorArr2[0],
            },
            {
                offset: 0.5,
                color: colorArr2[0],
            },
            {
                offset: 0.5,
                color: colorArr2[1],
            },
            {
                offset: 1,
                color: colorArr2[1],
            },
        ],
    };
    var barWidth = 15;
    const option = {
        // backgroundColor: "#064965",
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                var str = params[0].name + "月";
                params.filter(function (item) {
                    if (item.componentSubType == "bar") {
                        str += "<br/>" + item.seriesName + "：" + item.value + '万元';
                    }
                });
                return str;
            },
        },
        //图表大小位置限制
        grid: {
            x: '13%',
            x2: '6%',
            y: '15%',
            y2: '12%',
        },
        legend: {
            // icon: 'rect',
            right: "center",
            top: '2%',
            itemWidth: 20, // 设置宽度
            itemHeight: 10, // 设置高度
            itemGap: 15, // 设置间距
            textStyle: { //图例文字的样式
                color: '#89BFE5',
                fontSize: 12
            },
            selectedMode: false
        },
        xAxis: {
            data: props.xAxisData,
            //坐标轴
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#214776'
                },
                textStyle: {
                    color: '#fff',
                    fontSize: '10'
                }
            },
            type: 'category',
            axisLabel: {
                color: '#C5DFFB',
                fontWeight: 500,
                fontSize: '14',
                interval: 1
            },
            axisTick: {
                textStyle: {
                    color: '#fff',
                    fontSize: '16'
                },
                show: false,
            },
            axisLine: {
                //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                    type: 'dashed',//线的类型 虚线
                    color: '#DEDEDE',
                },
            },
        },
        yAxis: {
            nameTextStyle: {
                color: '#DEDEDE',
                fontSize: 12,
                padding: 10,
            },
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',//线的类型 虚线0
                    opacity: 0.2//透明度
                },
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
            },
            //坐标值标注
            axisLabel: {
                show: true,
                color: '#C5DFFB'
            },
        },
        series: [
            //中
            {
                z: 1,
                name: props.legend[0],
                type: "bar",
                barWidth: barWidth,
                barGap: "0%",
                data: props.seriesData1,
                color: color,
                //柱形图上方标题
                label: {
                    show: true,
                    position: 'top',
                    // textStyle: {
                    //     color: 'rgb(1, 255, 250)',
                    //     fontSize: 8
                    // }
                    color: 'rgb(1, 255, 250)',
                    fontSize: 8
                }
            },
            //下
            {
                z: 2,
                name: props.legend[0],
                type: "pictorialBar",
                data: props.seriesData1,
                symbol: "diamond",
                symbolOffset: ["-75%", "50%"],
                symbolSize: [barWidth, 10],
                itemStyle: {
                    color: color
                },
                tooltip: {
                    show: false,
                },
            },
            //上
            {
                z: 3,
                name: props.legend[0],
                type: "pictorialBar",
                symbolPosition: "end",
                data: props.seriesData1,
                symbol: "diamond",
                symbolOffset: ["-85%", "-60%"],
                symbolSize: [barWidth - 2, (10 * (barWidth - 2)) / barWidth],
                itemStyle: {
                    borderWidth: 2,
                    color: colorArr[2]
                },
                tooltip: {
                    show: false,
                },
            },
            {
                z: 1,
                name: props.legend[1],
                type: "bar",
                barWidth: barWidth,
                barGap: "50%",
                data: props.seriesData2,
                color: color2,
                //柱形图上方标题
                label: {
                    show: true,
                    position: 'top',
                    // textStyle: {
                    //     color: 'rgb(2, 157, 246)',
                    //     fontSize: 8
                    // }
                    color: 'rgb(2, 157, 246)',
                    fontSize: 8
                }
            },
            {
                z: 2,
                name: props.legend[1],
                type: "pictorialBar",
                data: props.seriesData2,
                symbol: "diamond",
                symbolOffset: ["75%", "50%"],
                symbolSize: [barWidth, 10],
                itemStyle: {
                    color: color2
                },
                tooltip: {
                    show: false,
                },
            },
            {
                z: 3,
                name: props.legend[1],
                type: "pictorialBar",
                symbolPosition: "end",
                data: props.seriesData2,
                symbol: "diamond",
                symbolOffset: ["75%", "-50%"],
                symbolSize: [barWidth - 2, (10 * (barWidth - 2)) / barWidth],
                itemStyle: {
                    borderWidth: 2,
                    color: colorArr2[2]
                },
                tooltip: {
                    show: false,
                },
            },
        ],
    };
    chart.setOption(option);
}

const resize = () => {
    chartBar.value.resize();
}

onMounted(() => {
    chartBar.value = markRaw(echarts.init(document.getElementById('chartBar')))
    createBarChart(chartBar.value)

    window.addEventListener("resize", resize);
})


</script>

<style lang="scss" scoped>
#chartBar {
    width: 100%;
    height: 100%;
}
</style>